<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/nav.css" />
		<script src="js/mui.min.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background: #F5F6F7;
			}
			
			.mui-bar a {
				color: white;
			}
			
			.mui-title {
				color: white;
				font-size: 18px;
				font-family: "黑体";
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0px;
			}
			
			.mui-content {
				background: #F5F6F7;
			}
			
			.btn {}
			
			#btn {
				float: right;
				color: #FFFFFF;
				margin-right: -10px;
				margin-top: -1px;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				white-space: normal;
			}
			
			.p1 {
				font-size: 12px;
			}
			
			.mui-table-view .mui-media-object {
				height: 60px;
				width: 60px;
				max-width: 60px;
			}
			
			.time {
				font-size: 10px;
				color: black;
				position: absolute;
				bottom: 5px;
				right: 5%;
			}
			
			.doing {
				color: orange;
			}
			
			.finish {
				color: green;
			}
			
			.start {
				color: #0174E5;
			}
			
			#ajax-con {
				margin-top: 10px;
			}
			
			#dateList {
				width: 100%;
				height: 85px;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 2px #cccccc;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
				/*margin-top: 50px;*/
			}
			
			.dateItem {
				width: 50px;
				height: 85px;
				/*float: left;*/
				/*border: 1px solid #000000;*/
				/*position: absolute;*/
				display: inline-block !important;
			}
			
			.dateItem p {
				width: 100%;
				text-align: center;
				font-size: 12px;
				font-family: "微软雅黑";
				margin-top: 2px;
			}
			
			#dataListItem {
				height: 100%;
				/*width: 1860;*/
			}
			
			#dateNav {
				width: 100%;
				height: 25px;
				/*position: absolute;*/
				background-color: #f5f6f7;
			}
			
			#Today {
				margin-top: 7px;
				/*position: absolute;*/
				/*top: 85px;*/
				width: 100%;
				height: 25px;
				background-color: #eceffb;
			}
			
			#Today p {
				line-height: 25px;
				margin-left: 15px;
				font-size: 12px;
				font-family: "微软雅黑";
			}
			
			.select {
				width: 40px;
				height: 40px;
				background-color: #607EDF;
				border-radius: 20px;
				padding-top: 7px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.select p {
				color: #FFFFFF;
			}
			
			.unselect {
				width: 40px;
				height: 40px;
				padding-top: 7px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.unselect p {
				color: #000000;
			}
			
			.weekend {
				color: #F8C429;
				background-color: #F5F6F7;
			}
			
			.workday {
				background-color: #F5F6F7;
			}
			
			.card-item {
				width: 94%;
				margin-left: 3%;
				border-radius: 5px;
				margin-bottom: 12px;
				background-color: #DFE5F8;
				height: 100px;
				box-shadow: 0px 1px 1px #CCCCCC;
				/*border: 1px solid #000000;*/
			}
			
			.pic {
				width: 70px;
				height: 70px;
				margin-top: 15px;
				border-radius: 3px;
				margin-left: 15px;
				float: left;
			}
			
			.card-con {
				width: 70%;
				float: left;
			}
			
			.tit {
				margin-top: 12px;
				margin-left: 10px;
				color: #000000;
				font-family: "微软雅黑";
				font-size: 14px;
			}
			
			.con {
				margin-left: 10px;
				font-size: 13px;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.conbtn {
				position: absolute;
				right: 26px;
				width: 60px;
				height: 26px;
				margin-top: 67px;
				line-height: 0px;
				background-color: #FFFFFF;
				border: none;
				color: #617FDE;
				padding-left: 10px;
			}
			
			#circle {
				width: 47px;
				height: 47px;
				border-radius: 30px;
				background: #617FDE;
				position: fixed;
				bottom: 30px;
				right: 30px;
				z-index: 99999;
				box-shadow: 0px 0px 15px #617FDE;
			}
			
			#circle img {
				width: 70%;
				margin-left: 15%;
				margin-top: 15%;
			}
			
			#yearAndmonth {
				width: 100%;
				height: 0px;
				/*padding-top: 12px;*/
				background-color: #FFFFFF;
				overflow: hidden;
				transition: 0.6s;
			}
			
			.mui-icon-back {
				color: #607EDF;
			}
			
			.mui-icon-forward {
				color: #607EDF;
			}
			
			.YM-item {
				width: 100px;
				height: 30px;
				/*border: 1px solid #000000;*/
				float: left;
				text-align: center;
			}
			
			.YM-item span {
				float: left;
				width: 18px;
				height: 18px;
			}
			
			.YM-item span,
			.YM-item p,
			#dataicon {
				margin-top: 10px;
			}
			
			.YM-item p {
				float: left;
				font-size: 16px;
				line-height: 25px;
				color: #607EDF;
				margin-left: 7px;
			}
			
			#dataicon {
				margin-top: 11px;
				margin-right: 7px;
				height: 20px;
				float: right;
			}
			
			#dot {
				margin-top: 7px;
				margin-left: calc((100% - 260px) / 2 - 12px);
				float: left;
				height: 30px;
			}
			
			.doing {
				color: #66CC00;
			}
			
			.finish {
				color: #FF9900;
			}
			
			.refuse {
				color: red;
			}
			
			#mnue-icon {
				float: left;
				margin-top: 11px;
				margin-left: 5px;
				height: 20px;
				width: 25px;
			}
			
			#side-mnue {
				width: 80%;
				height: 100%;
				background-color: #FFFFFF;
				position: fixed;
				float: left;
				left: -80%;
				transition: 0.3s;
				z-index: 100;
			}
			
			.on-off {
				left: -80%;
			}
			
			#smh-pic {
				width: 60px;
				height: 60px;
				float: left;
				margin-left: 20px;
				margin-top: 50px;
			}
			
			#sm-head {
				width: 100%;
				height: 170px;
				background-image: url(pic/mnue3.jpg);
				background-size: 100%;
			}
			
			#text {
				float: left;
				margin-top: 58px;
				margin-left: 10px;
			}
			
			#smh-name {
				font-size: 18px;
				font-family: "黑体";
				color: #FFFFFF;
				font-weight: 900;
				/*font-weight: 500;*/
			}
			
			#smh-number {
				color: #FFFFFF;
				font-size: 13px !important;
			}
			
			.sm-item {
				clear: both;
				width: 100%;
				height: 55px;
				/*border: 1px solid #000000;*/
				border-bottom: 1px solid #f5f6f7;
				margin-bottom: 10px;
			}
			
			.sm-item img {
				float: left;
				height: 27px;
				margin-top: 15px;
				margin-left: 10px;
			}
			
			.sm-item p {
				float: left;
				font-size: 14px;
				line-height: 55px;
				margin-left: 20px;
			}
			
			#box-shadow {
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				background: #000000;
				z-index: 11;
				opacity: 0.3;
				display: none;
			}
		</style>

		<script type="text/javascript">
			mui.init()
		</script>
	</head>

	<body>
		<header id="hey" class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<img id="mnue-icon" src="pic/mnueicon2.png" />
			<h1 class="mui-title">报修列表</h1>
			<img id="dataicon" src="pic/dataicon.png" />
		</header>
		<div id="box-shadow"></div>
		<div id="side-mnue">
			<div id="sm-head">
				<img id="smh-pic" src="pic/headimg.png" />
				<div id="text">
					<p id="smh-name"></p>
					<p id="smh-number">工号：</p>
				</div>

			</div>
			<div id="order" class="sm-item">
				<img src="pic/order.png" />
				<p>订单</p>
			</div>
			<div class="sm-item">
				<img src="pic/setting-icon.png" />
				<p>设置</p>
			</div>
			<div id="quit" class="sm-item">
				<img src="pic/exit.png" />
				<p style="color: orangered;">退出</p>
			</div>
		</div>
		<div class="mui-content">
			<div id="yearAndmonth">
				<div style="margin-left: 30px;" class="YM-item">
					<span class="reduce mui-icon mui-icon-back"></span>
					<p id="yearitem"><b></b></p>
					<span class="add mui-icon mui-icon-forward"></span>
				</div>
				<img id="dot" src="pic/dot.png" />
				<div style="float:right;margin-right:27px;" class="YM-item">
					<span class="reduce mui-icon mui-icon-back"></span>
					<p style="margin-left: 20px; margin-right: 10px;" id="monthitem"><b></b></p>
					<span class="add mui-icon mui-icon-forward"></span>
				</div>

			</div>
			<div id="dateList">

			</div>

			<div id="Today">
				<p>TODAY</p>
			</div>
			<div id="ajax-con">

			</div>

			<!--<p style="width: 100%;text-align: center;font-size: 10px;">长按可删除所选记录</p>-->
		</div>
		<!--<div onclick="location.href='repair-sumbit.html'" id="circle">
			<img src="pic/addicon.png" />
		</div>-->
		<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/dateMnueMaker.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({})

			document.getElementById("quit").addEventListener("tap", function() {
				plus.runtime.quit();
				//				window.location.close()
			})
			window.addEventListener('refresh', function(e) { //执行刷新
				location.reload();
			});
			var Qyear, Qmonth;
			window.onload = function() {
				myajax.data = {}
				myajax.backfun = function(data) {
					console.log("个人信息", data)
					document.getElementById("smh-name").innerHTML = data.data.trueName
					document.getElementById("smh-number").innerHTML = "工号：" + data.data.repairId
				}
				myajax.get("repair/staff/detail")
			}
			mui('body').on('tap', '#order', function() {
				document.getElementById("side-mnue").style.left = " -80%"
				document.getElementById("box-shadow").style.display = "none"
			})
			var mnuemark = false
			//			document.getElementsByClassName()
			mui('body').on('tap', '#box-shadow', function() {
				document.getElementById("side-mnue").style.left = "-80%"
				this.style.display = "none"
			})
			document.getElementById("mnue-icon").addEventListener("tap", function() {
				document.getElementById("side-mnue").style.left = "0"
				mnuemark = !mnuemark
				document.getElementById("box-shadow").style.display = "block"
			})
			Qyear = new Date().getFullYear()
			Qmonth = new Date().getMonth() + 1
			//				console.log(Qyear)
			//				console.log(Qmonth)
			document.getElementsByClassName("add")[0].addEventListener("tap", function() {
				Qyear++
				document.getElementById("yearitem").innerHTML = "<b>" + Qyear + "年</b>"
				makeDivOther(Qyear, Qmonth)
			})
			document.getElementsByClassName("add")[1].addEventListener("tap", function() {
				Qmonth++
				if(Qmonth == 0) {
					Qmonth = 12
				}
				if(Qmonth == 13) {
					Qmonth = 1
				}
				document.getElementById("monthitem").innerHTML = "<b>" + Qmonth + "月</b>"
				makeDivOther(Qyear, Qmonth)
			})
			document.getElementsByClassName("reduce")[0].addEventListener("tap", function() {
				Qyear--
				document.getElementById("yearitem").innerHTML = "<b>" + Qyear + "年</b>"
				makeDivOther(Qyear, Qmonth)
			})
			document.getElementsByClassName("reduce")[1].addEventListener("tap", function() {
				Qmonth--
				if(Qmonth == 0) {
					Qmonth = 12
				}
				if(Qmonth == 13) {
					Qmonth = 1
				}
				document.getElementById("monthitem").innerHTML = "<b>" + Qmonth + "月</b>"
				makeDivOther(Qyear, Qmonth)
			})
			document.getElementById("yearitem").innerHTML = "<b>" + Qyear + "年</b>"
			document.getElementById("monthitem").innerHTML = "<b>" + Qmonth + "月</b>"

			var mark = false
			document.getElementById("dataicon").addEventListener("tap", function() {
				if(mark) {
					document.getElementById("yearAndmonth").style.height = "0px"

				} else {
					document.getElementById("yearAndmonth").style.height = "43px"
				}
				mark = !mark
			})

			function getday(date) { //根据年月日获取星期
				var arys1 = []
				arys1 = date.split('-'); //日期为输入日期，格式为 2013-3-10
				//				console.log(arys1);
				var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
				var week1 = String(ssdate.getDay()).replace("0", "Sun").replace("1", "Mon").replace("2", "Tue").replace("3", "Wed").replace("4", "Thr").replace("5", "Fri").replace("6", "Sat") //就是你要的星期几
				return week1
			}

			function getdayclass(date) { //根据年月日获取星期
				var arys1 = []
				arys1 = date.split('-'); //日期为输入日期，格式为 2013-3-10
				//				console.log(arys1);
				var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
				var week1 = String(ssdate.getDay()).replace("0", "weekend").replace("1", "workday").replace("2", "workday").replace("3", "workday").replace("4", "workday").replace("5", "workday").replace("6", "workday") //就是你要的星期几
				return week1
			}
			//			console.log(getday("1992-12-7"))
			//			console.log(new Date(1532275200 * 1000).getDay())
			//			console.log(new Date().getFullYear())

			function makeDiv() { //动态添加上方日期栏
				var daycount
				var Fdaycount
				var dayclass;
				var year = new Date().getFullYear()
				var month = new Date().getMonth() + 1
				if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
					Fdaycount = 29;
				} else {
					Fdaycount = 28;
				}
				if(new Date().getDay() == 0 || new Date().getDay() == 6) {
					dayclass = "weekend"
				} else {
					dayclass = "workday"
				}
				//				console.log(dayclass)
				//				console.log(Fdaycount)
				//				console.log(month)
				switch(month) {
					case 1:
						;
					case 3:
						;
					case 5:
						;
					case 7:
						;
					case 8:
						;
					case 10:
						;
					case 12:
						;
						daycount = 31;
						break;
					case 2:
						daycount = Fdaycount;
						break;
					default:
						daycount = 30;
						break;
				}
				for(i = 0; i < daycount; i++) {
					var selectclass = "unselect"
					if((i + 1) == new Date().getDate()) {
						selectclass = "select"
					}
					$("#dateList").append("<div  class='dateItem'><p class='" + getdayclass(year + "-" + month + "-" + (i + 1).toString()) + "'>" + getday(year + "-" + month + "-" + (i + 1).toString()) + "</p><div class='forif " + selectclass + "'><p >" + (i + 1).toString() + "</p></div></div>");
				}
				myajax.backfun = function(data) {

					for(i in data.data) {
						var imgurl = myajax.baseurl + "files/thumb/" + data.data[i].photos.photoPath1
						console.log(imgurl)
						if(data.data[i].photos.photoPath1 == "") {
							imgurl = "pic/withoutimg.png"
						}
						forajax(data.data[i].orderAddress, data.data[i].orderDescription, data.data[i].id, data.data[i].orderState, imgurl)
						//						forajax(data.data[i].orderAddress, data.data[i].orderDescription,data.data[i].id,data.data[i].orderState,data.data[i].photos.photoPath1)
					}
					mui('body').on('tap', '.card-item', function() {
						console.log(this.firstChild.innerHTML)
						localStorage.setItem("repair-id", this.firstChild.innerHTML)
						mui.openWindow('repair_stata.html', 'r-state', {})
					})
				}
				myajax.get("repair/order/time/" + Qyear + "-" + Qmonth + "-" + new Date().getDate())
				document.getElementById("dateList").scrollLeft = 41.5 * new Date().getDate()
				mui('#dateList').on('tap', '.dateItem', function() {
					console.log(localStorage.getItem("token"))

					var index = $(this).index()
					for(i in document.getElementsByClassName("forif")) {
						document.getElementsByClassName("forif")[i].className = "forif unselect";
					}
					document.getElementsByClassName("forif")[index].className = "forif select"
					console.log("ajax用", Qyear)
					console.log("ajax用", Qmonth)
					console.log("ajax用", index + 1)
					myajax.backfun = function(data) {
						$("#ajax-con").empty()
						for(i in data.data) {
							var imgurl = myajax.baseurl + "files/thumb/" + data.data[i].photos.photoPath1
							console.log(imgurl)
							if(data.data[i].photos.photoPath1 == "") {
								imgurl = "pic/withoutimg.png"
							}
							forajax(data.data[i].orderAddress, data.data[i].orderDescription, data.data[i].id, data.data[i].orderState, imgurl)
							//						forajax(data.data[i].orderAddress, data.data[i].orderDescription,data.data[i].id,data.data[i].orderState,data.data[i].photos.photoPath1)
						}
						mui('body').on('tap', '.card-item', function() {
							console.log(this.firstChild.innerHTML)
							localStorage.setItem("repair-id", this.firstChild.innerHTML)
							mui.openWindow('repair_stata.html', 'r-state', {})
						})
					}
					myajax.get("repair/order/time/" + Qyear + "-" + Qmonth + "-" + (index + 1).toString())
				})

			}
			makeDiv()

			function forajax(place, con, id, state, picurl) {
				var classname
				var name
				switch(state) {
					case "auditing":
						{
							classname = "maintenancing";name = "未完成";
						}
					case "maintenancing":
						{
							classname = "doing";name = "未完成";
						}
						break;
					case "maintenanced":
						{
							classname = "finish";name = "已完成";
						}
						break;
					case "refuse":
						{
							classname = "refuse";name = "已拒绝";
						}
						break;
				}
				$("#ajax-con").append(
					"<div class='card-item'>" +
					"<div style='display:none;'>" + id + "</div>" +
					"<img class='pic' src='" + picurl + "' />" +
					"<div class='card-con'>" +
					"<p class='tit'>地点：" + place + "</p>" +
					"<p class='con'>实际情况：" + con + "</p>" +
					"</div>" +
					"<button type='button' class='" + classname + " conbtn mui-btn mui-btn-grey'>" + name + "</button>" +
					"</div>"
				)
			}
		</script>
	</body>

</html>